<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="keywords" content="喻博文,前端开发,个人简历,网站外包"/>
	<meta name="description" content="喻博文是一名前端开发工程师,掌握JavaScript语言、HTML+CSS布局与样式" />
    <title>Web前端开发工程师喻博文的个人简历网站</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
<a href="https://github.com/iProgramme"><img style="position: absolute; top: 0px; right: 0; border: 0;z-index:1200;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" class="hidden-xs"></a>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home
"></span> &nbsp;首页</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#"><span class="glyphicon glyphicon-list
"></span> &nbsp;我的前端博客</a>
                        </li>
                        <li>
                            <a href="https://github.com/iProgramme" target="_blank">Fork me on GitHub</a>
                        </li>
                        <li>
                            <a href="#"><span class="glyphicon glyphicon-envelope"></span> &nbsp;给我邮件</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th
"></span> &nbsp;有趣的小案例<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="demo/01.html" target="_blank">1.canvas乱画</a>
                                </li>
                                <li>
                                    <a href="demo/02.html" target="_blank">2.金星和地球的运动轨迹</a>
                                </li>
                                <li>
                                    <a href="demo/03.html" target="_blank">3.正弦函数</a>
                                </li>
                                <li>
                                    <a href="demo/04.html" target="_blank">4.第四个</a>
                                </li>
                                <li>
                                    <a href="demo/05.html" target="_blank">5.正弦函数</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>
<div id="dowebok" class="index-y">
    <div class="bdsharebuttonbox" data-tag="share_1">
        <a class="bds_mshare" data-cmd="mshare"></a>
        <a class="bds_qzone" data-cmd="qzone" href="#"></a>
        <a class="bds_tsina" data-cmd="tsina"></a>
        <a class="bds_baidu" data-cmd="baidu"></a>
        <a class="bds_renren" data-cmd="renren"></a>
        <a class="bds_tqq" data-cmd="tqq"></a>
        <a class="bds_more" data-cmd="more">更多</a>
        <a class="bds_count" data-cmd="count"></a>
    </div>

    <div class="section"  id="liziparnet">
        <div class="jumbotron jumbotron-y">
        <div class="container">
            <div class="row clearfix">
                    <div class="col-md-12 column">
                        <h1 class="text-center">总要有些人为梦想而活着。</h1>
                        <h3 class="text-center">我叫喻博文</h3>
                        <h4 class="text-center">
                            一名前端开发工程师
                            <br>
                            <br>
                            邮箱:yubowen@yubowen.xin

                        </h4>
                        <p><br>
                            &nbsp;&nbsp;&nbsp;&nbsp;2015年毕业于 <b>太原理工大学</b> 并开始从事前端开发工作。前后做过门户网站,响应式,后台管理系统和微信小程序等。
                        </p>
                        <p>

                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--二-->
    <div class="section">
        <div class="slide">
            <img src="img/index11.png" alt=""/>
            <div class="i3info">
                <h4>中国农业银行门户网站,h5c3</h4>
                <p>中国农业银行官方网站,负责PSD切图和构建高质量的响应式页面框架,解决前人遗留的bug <br>熟练掌握了响应式页面的原理,工作之余抽时间学习基本的js</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index4.png" alt=""/>
            <div class="i3info">
                <h4>第二个,ajax</h4>
                <p>利用学到的基本js以及jQuery完成页面的功能 <br>过程了解到ajax的作用</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index4.png" alt=""/>
            <div class="i3info">
                <h4>第三个面向对象</h4>
                <p>利用学到的基本js以及jQuery完成页面的功能 <br>过程了解到ajax的作用</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index3.png" alt=""/>
            <div class="i3info">
                <h4>自行车后台管理系统,第四canvas</h4>
                <p>根据领导要求,结合canvas和百度echarts完成数据可视化,与后台人员合作开发页面其他功能<br>掌握了canvas对于数据可视化的用法
                </p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index4.png" alt=""/>
            <div class="i3info">
                <h4>外包服务,第五模块化开发</h4>
                <p>接触requirejs,开始学习模块化开发,并将其应用到该项目之中<br>熟知AMD和CMD规范的异同,熟练使用requirejs进行开发</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index2.png" alt=""/>
            <div class="i3info">
                <h4>后勤投诉管理系统,第六,mv*思想</h4>
                <p>与设计和需求协同制定后台管理系统的页面元素,和后台人员合作开发页面功能<br>在其中学习基本的PHP</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index2.png" alt=""/>
            <div class="i3info">
                <h4>后勤投诉管理系统,第七,gulp工作流</h4>
                <p>与设计和需求协同制定后台管理系统的页面元素,和后台人员合作开发页面功能<br>在其中学习基本的PHP</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index2.png" alt=""/>
            <div class="i3info">
                <h4>后勤投诉管理系统,第八,接触后端node</h4>
                <p>与设计和需求协同制定后台管理系统的页面元素,和后台人员合作开发页面功能<br>在其中学习基本的PHP</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index2.png" alt=""/>
            <div class="i3info">
                <h4>后勤投诉管理系统,第九,移动app和组件化</h4>
                <p>与设计和需求协同制定后台管理系统的页面元素,和后台人员合作开发页面功能<br>在其中学习基本的PHP</p>
            </div>
        </div>
        <div class="slide">
            <img src="img/index2.png" alt=""/>
            <div class="i3info">
                <h4>后勤投诉管理系统,第十,微信小程序</h4>
                <p>与设计和需求协同制定后台管理系统的页面元素,和后台人员合作开发页面功能<br>在其中学习基本的PHP</p>
            </div>
        </div>
    </div>
    <!--三-->
    <div class="section">
        <div id="parent">
            <img src="" alt="" id="background" style="width:100%;" class="col-xs-12">
            <img src="" alt="" id="background2" style="width:100%;" class="col-md-12">
            <!--pc端显示-->
            <div class="d3zhuan hidden-xs">
                <ul class='-center'>
                    <!--模板填坑出-->
                </ul>
            </div>
        </div>
        <!--移动端显示-->
        <div class="d3zhuan visible-xs-block">
            <div class="table-cell">
                <div class="container text-center">
                    <div class="col-md-12"><h1>关于我</h1></div>
                    <div class="col-md-12"><h3>两年开发经验 <br><br>扎实的js和css3基础<br><br>熟悉MV*和模块化开发 <br><br>gulp等自动化构建工具<br><br><span class="hidden-xs">熟练的与后台对接能力<br><br></span>  强烈的自我驱动<br><br>对编程的热爱</div>
                </div>
            </div>
        </div>
    </div>
    <!--四-->
    <div class="section text-center">
        <h1>联系我</h1>
        <br>
        <p>电话:18520065443</p>
        <br>

        <p>邮箱:yubowen@yubowen.xin</p>
        <br>

        <p>微信:CharlesYBW</p>
        <br>

        <p>qq:747137830</p>
    </div>
</div>
    <div style="display: none;">
        已学技能
        HTML5
        CSS3
        JavaScript
        jQuery
        懒加载
        jQuery颜色渐变
        jQueryUI
        jQuery easing
        (安装 webstorm 和 less )
        上面是第一个月学的

        bootstrap
        fullPage.js
        animate.css -------------css动画库
        zepto.js ----------------手机端的jQuery
        swiper.js ---------------手指滑动事件
        wampserver / xampp-osx---安装Apache 服务器
        php
        ajax
        这是第二个月学的

		面向对象编程
		canvas
		AMD/CMD   
		// 和 common.js 差不多,common.js是服务端的模块化开发规范
		require.js 是基于 AMD实现的模块化开发
		AMD 有个 require.js   
		CMD 有个 sea.js
        这是第三个月学的

		angular.js
		MVVM设计模式
        这是第四个月学的
    </div>

</body>

</html>
<script id="template" type="text/template">
    <% for(var i = 0;i<app.length;i++){ %>
    <li>
        <div class='w'>
            <div class='f'>
                <img src="img/<%= app[i].src %>" alt="">

            </div>
            <div class='b'>
                <h3>
                    <%= app[i].txt %>
                </h3>
            </div>
        </div>
    </li>
    <% } %>
</script>
<script src="js/jquery-1.12.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!--pc下粒子效果-->
<script src="js/canvas-particle.js"></script>
<!--下雨效果-->
<script src="js/rainyday.js"></script>
<!--懒加载-->
<script src="js/jquery.lazyload.min.js"></script>
<!--第三页的3D-->
<script src="js/3D.js"></script>
<!--模板-->
<script src="js/template-native.js"></script>
<script src="js/index3.js"></script>
<script src="js/index.js"></script>













